<template>
  <div class="tags-check inline-b">
    <a-checkable-tag
      :checked="checkedList.indexOf(item.value) > -1"
      v-for="item in data"
      :key="item.value"
      @change="checked => handleChange(item.value, checked)"
    >
      {{ item.title }}
    </a-checkable-tag>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    fieldNames: {
      type: Object,
      default: () => {
        return {
          title: "title",
          value: "value"
        };
      }
    },
    defaultValue: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      checkedList: [] // 已选中标签
    };
  },
  methods: {
    handleChange(tag) {
      this.checkedList = [tag];
      this.$emit("change", this.checkedList);
    }
  },
  created() {
    this.checkedList = this.defaultValue;
  }
};
</script>

<style lang="scss" scoped>
.tags-check ::v-deep .ant-tag {
  font-size: 14px;
  cursor: pointer;
}
</style>
